<template>
  <el-dialog :model-value="dialogVisible" :title="title" :before-close="handleClose" draggable>
    <div class="deptRights" v-loading="loading">
      <ProTable
        ref="proTable"
        title="角色列表"
        rowKey="roleid"
        :tool-button="false"
        :columns="columns"
        :request-api="getTableList"
        :data-callback="dataCallback"
      >
        <!-- Expand -->
        <template #expand="scope">
          {{ scope.row }}
        </template>
      </ProTable>
    </div>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" :loading="loading1" @click="_submit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="DeptRightsDialog">
import { ElMessage } from "element-plus";
import { nextTick, ref, watch } from "vue";
import { User } from "@/api/interface";
import { saveOperatorRoles } from "@/api/modules/user";
import { getAllRoleList } from "@/api/modules/role";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";

const loading = ref(false);
const loading1 = ref(false);
const proTable = ref();
const roleIds = ref([]);

const columns: ColumnProps<User.RoleList>[] = [
  { type: "selection", fixed: "left", width: 60 },
  {
    prop: "rolename",
    label: "角色描述"
  },
  {
    prop: "note",
    label: "备注信息"
  }
];

const dataCallback = (data: any, callback: Function) => {
  loading.value = false;
  roleIds.value = data;
  callback({ list: data }, () => {
    proTable.value.clearSelection();
    props.curRow.roleIds.forEach(item => {
      proTable.value.element.toggleRowSelection(
        data.find(val => val.roleid === item),
        true
      );
    });
  });
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getAllRoleList(newParams);
};

const handleClose = () => {
  props.handleClose();
};

const _submit = async () => {
  const roleIds = proTable.value.element.getSelectionRows().map(item => item.roleid);
  if (!roleIds.length) {
    ElMessage.error("请勾选角色");
    return false;
  }
  loading1.value = true;
  try {
    await saveOperatorRoles({
      id: props.curRow.optid,
      list: roleIds
    });
    ElMessage.success("更新成功");
    props.handleClose();
    loading1.value = false;
  } catch (error) {
    loading1.value = false;
    console.log(error);
  }
};

const props = defineProps<{
  dialogVisible: boolean;
  title: string;
  handleClose: () => void;
  optId: string;
  curRow: { [key: string]: any };
}>();

watch(
  () => props.dialogVisible,
  nV => {
    if (nV) {
      nextTick(() => {
        proTable.value.element.setScrollTop(0);
        if (roleIds.value.length) {
          proTable.value.clearSelection();
          props.curRow.roleIds.forEach(item => {
            proTable.value.element.toggleRowSelection(
              roleIds.value.find(val => val.roleid === item),
              true
            );
          });
        }
      });
    }
  }
);
</script>
<style lang="scss" scoped>
.deptRights {
  height: 80vh;
  overflow-y: auto;
}
</style>
